<template>
  <div class="body" v-loading="loading">
    <el-form  :model="header" size="small" label-width="80px" :inline="true" class="header">
      <div v-if="!select">
        <div class="header_row">
          <el-form-item label="批次号">
            <el-input type="text" v-model="header.batchNo" :disabled="header.status === 'audit'" placeholder="请输入批次号" clearable></el-input>
          </el-form-item>
          <el-form-item label="物料">
            <el-select style="width: 285px" filterable remote size="small" :remote-method="e => getMaterialStockList(e)" v-model="header.materialNo" clearable class="material" placeholder="请输入物料编码或者名称">
              <el-option v-for="item in this.materialList" :key="item.fNumber" :label="item.fNumber + '：' + item.fName + ' ' + item.fSpecification" :value="item.fNumber" />
            </el-select>
          </el-form-item>
          <el-form-item prop="stockNo" label="仓库">
            <el-select style="width: 285px" filterable remote size="small" v-model="header.stockNo" clearable placeholder="请选择仓库">
              <el-option v-for="item in this.stockList" :key="item.key" :label="item.name" :value="item.key" />
            </el-select>
          </el-form-item>
        </div>
        <div class="header_row" style="display: flex; justify-content: space-between; margin-right: 50px">
          <el-form-item prop="exp" label="保质期" class="p3">
            <el-input-number size="small" v-model="header.exp" :precision="0" style="width: 205px;" :min="1" :disabled="header.status === 'audit'" />
            <span class="comment">天</span>
          </el-form-item>
          <div>
            <el-button size="small" style="height: 15px" @click="getMaterialList">&nbsp;搜&nbsp;索&nbsp;</el-button>
            <el-button size="small" style="height: 15px" @click="selectMaterial">&nbsp;选&nbsp;择&nbsp;</el-button>
            <el-button size="small" style="height: 15px" @click="switchDiv">&nbsp;切&nbsp;换&nbsp;</el-button>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="header_row" style="display: flex; justify-content: space-between; margin-right: 50px">
          <el-form-item label="单据号">{{ header.billNo }}</el-form-item>
          <div>
            <el-button type="success" style="height: 20px" v-if="!header.status" @click="saveBill">&nbsp;保&nbsp;存&nbsp;</el-button>
            <el-button type="primary" style="height: 20px" v-if="header.status === 'save'" @click="auditBill">&nbsp;审&nbsp;核&nbsp;</el-button>
            <el-button type="info" style="height: 15px" @click="gotoList">&nbsp;返&nbsp;回&nbsp;</el-button>
          </div>
        </div>
        <div class="header_row" style="display: flex;justify-content: space-between">
          <div>
            <el-form-item label="修改批号">
            <el-input type="text" v-model="header.updateBatchNo" :disabled="header.status === 'audit'" placeholder="请输入修改批次号" clearable></el-input>
          </el-form-item>
            <el-form-item prop="exp" label="保质期" class="p3">
              <el-input-number size="small" v-model="header.updateExp" :precision="0" style="width: 205px;" :min="1" :disabled="header.status === 'audit'" />
              <span class="comment">天</span>
            </el-form-item>
          </div>
          <el-button size="small" style="height: 15px; margin-right: 50px" @click="select = false" v-if="!header.status">&nbsp;切&nbsp;换&nbsp;</el-button>
        </div>
      </div>
    </el-form>
    <div v-if="!select">
      <el-table :data="boxList" height="calc(100vh - 200px)"  @selection-change="selectChange">
        <el-table-column label="#" width="50" align="center" type="selection" v-if="!select"></el-table-column>
        <el-table-column label="No." width="45" align="right" type="index"></el-table-column>
        <el-table-column label="仓库" min-width="150" prop="stockNo">
          <template #default="scope">
            {{ getStockName(scope.row.stockNo) }}
          </template>
        </el-table-column>
        <el-table-column label="物料编码" min-width="120" prop="materialNo"></el-table-column>
        <el-table-column label="物料名称" min-width="200" prop="materialName"></el-table-column>
        <el-table-column label="物料规格" min-width="150" prop="materialSpec"></el-table-column>
        <el-table-column label="批次号" min-width="150" prop="batchNo"></el-table-column>
        <el-table-column label="重量" width="100" prop="count" align="right"></el-table-column>
        <el-table-column label="保质期" width="80" prop="exp" align="right"></el-table-column>
        <el-table-column label="箱号" width="150" prop="boxNo"></el-table-column>
      </el-table>
    </div>
    <div v-else>
      <el-table :data="selectMaterialList" height="calc(100vh - 450px)"  @selection-change="selectChange">
        <el-table-column label="#" width="50" align="center" type="selection" v-if="!select"></el-table-column>
        <el-table-column label="No." width="45" align="right" type="index"></el-table-column>
        <el-table-column label="仓库" min-width="150" prop="stockNo">
          <template #default="scope">
            {{ getStockName(scope.row.stockNo) }}
          </template>
        </el-table-column>
        <el-table-column label="物料编码" min-width="120" prop="materialNo"></el-table-column>
        <el-table-column label="物料名称" min-width="200" prop="materialName"></el-table-column>
        <el-table-column label="物料规格" min-width="150" prop="materialSpec"></el-table-column>
        <el-table-column label="批次号" min-width="150" prop="batchNo"></el-table-column>
        <el-table-column label="箱数" width="100" prop="boxCount" align="right"></el-table-column>
        <el-table-column label="重量" width="100" prop="count" align="right"></el-table-column>
        <el-table-column label="保质期" width="80" prop="exp" align="right"></el-table-column>
        <el-table-column label="操作" width="140px" align="left" fixed="right">
          <template #default="scope">
            <el-button type="text" style="color: #409EFF" icon="el-icon-view" @click="getTempBoxList(scope.row.id)">查看</el-button>
            <el-button type="text" style="color: var(--el-color-danger)" icon="el-icon-delete" @click="deleteTempMaterial(scope.row.id)" v-if="!header.status || header.status === 'save'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-table :data="selectBoxList" height="calc(100vh - 500px)"  @selection-change="selectChange">
        <el-table-column label="#" width="50" align="center" type="selection" v-if="!select"></el-table-column>
        <el-table-column label="No." width="45" align="right" type="index"></el-table-column>
        <el-table-column label="仓库" min-width="150" prop="stockNo">
          <template #default="scope">
            {{ getStockName(scope.row.stockNo) }}
          </template>
        </el-table-column>
        <el-table-column label="物料编码" min-width="120" prop="materialNo"></el-table-column>
        <el-table-column label="物料名称" min-width="200" prop="materialName"></el-table-column>
        <el-table-column label="物料规格" min-width="150" prop="materialSpec"></el-table-column>
        <el-table-column label="批次号" min-width="150" prop="batchNo"></el-table-column>
        <el-table-column label="重量" width="100" prop="count" align="right"></el-table-column>
        <el-table-column label="保质期" width="80" prop="exp" align="right"></el-table-column>
        <el-table-column label="箱号" width="150" prop="boxNo"></el-table-column>
        <el-table-column label="操作" min-width="80px" align="left" fixed="right">
          <template #default="scope">
            <el-button type="text" style="color: var(--el-color-danger)" icon="el-icon-delete" @click="deleteTempBox(scope.row.id)" v-if="!header.status || header.status === 'save'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>


<script>
import dayjs from 'dayjs'
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      select: false,
      loading: false,
      materialList: [],
      stockList: [],
      header: {},
      boxList: [],
      selectionList: [],
      selectMaterialList: [],
      selectBoxList: []
    }
  },
  async mounted() {
    let billNo = this.$route.query.billNo
    if (billNo) {
      this.select = true
      await this.getBill(billNo)
    }
    await this.getStock()
  },
  methods: {
    async getBill(billNo) {
      let res = await this.callApi('get_batch_and_exp_data', { billNo })
      if (res.res) {
        this.selectMaterialList = res.dataList
        this.header = res.header
      }
    },
    async switchDiv() {
      this.select = true
      await this.getTempMaterialList()
    },
    async saveBill() {
      this.loading = true;
      try {
        let res = await this.callApi('create_batch_and_exp_bill', {
          selectMaterialList: this.selectMaterialList,
          updateBatchNo: this.header.updateBatchNo,
          updateExp: this.header.updateExp
        });
        if (!res.res) return;
        this.header.billNo = res.billNo;
        this.header.status = 'save'
        ElMessage.success("订单创建成功！")
      } finally {
        this.loading = false;
      }
    },
    async auditBill() {
      this.loading = true;
      try {
        let res = await this.callApi('audit_batch_and_exp_bill', {
          billNo: this.header.billNo
        });
        if (!res.res) return;
        this.header.status = 'audit';
      } finally {
        this.loading = false;
      }
    },
    async selectMaterial() {
      if (this.selectionList.length === 0) {
        ElMessage.error("未选择物料")
        return
      }
      this.select = true
      this.loading = true;
      try {
        let res = await this.callApi('save_batch_and_exp_bill', {
          boxList: this.selectionList
        });
        if (!res.res) return;
        await this.getTempMaterialList()
      } finally {
        this.loading = false;
      }
    },
    async getTempMaterialList() {
      this.loading = true;
      try {
        let res = await this.callApi('get_batch_and_exp_material_temp_list');
        if (!res.res) return;
        this.selectMaterialList = res.data
      } finally {
        this.loading = false;
      }
    },
    async getTempBoxList(id) {
      this.loading = true;
      try {
        let res = await this.callApi('get_batch_and_exp_material_temp_box_list', {
          id: id
        });
        if (!res.res) return;
        this.selectBoxList = res.data
      } finally {
        this.loading = false;
      }
    },
    async deleteTempMaterial(id) {
      this.loading = true;
      try {
        let res = await this.callApi('delete_material_batch_and_exp', {
          id: id
        });
        if (!res.res) return;
        ElMessage.success("删除成功")
      } finally {
        this.loading = false;
      }
    },
    async deleteTempBox(id) {
      this.loading = true;
      try {
        let res = await this.callApi('delete_box_batch_and_exp', {
          id: id
        });
        if (!res.res) return;
        ElMessage.success("删除成功")
      } finally {
        this.loading = false;
      }
    },
    selectChange(data) {
      this.selectionList = data
    },
    /**
     * 获取仓库名
     */
    getStockName(val) {
      if (this.stockList && this.stockList.length > 0) {
        for(let i = 0; i < this.stockList.length; i++) {
          if (this.stockList[i].key === val) {
            return this.stockList[i].name;
          }
        }
      }
      return '';
    },
    gotoList() {
      return this.$router.push('/inventory/batchAndExpList')
    },
    /**
     * 获取物料
     */
    async getMaterialStockList(val) {
      if (!val) {
        this.materialList = []
        return
      }
      this.materialLoading = true
      try {
        const res = await this.callApi('get_material_by_key', {key: val, pageSize: 20})
        if (!res.res) return
        this.materialList = res.data
      } finally {
        this.materialLoading = false
      }
    },
    async getStock() {
      this.loading = true;
      try {
        let res = await this.$api.getChildDictionaryListByKeys({
          keys: ['stock']
        });
        if (!res.res) return;
        this.stockList = res.stock;
      } finally {
        this.loading = false;
      }
    },
    async getMaterialList() {
      if (!this.header.batchNo && !this.header.materialNo && !this.header.stockNo && !this.header.exp) {
        ElMessage.error("请至少输入一个条件");
        return
      }
      this.loading = true;
      try {
        let res = await this.callApi('get_batch_and_exp_material_list', {
          batchNo: this.header.batchNo,
          materialNo: this.header.materialNo,
          stockNo: this.header.stockNo,
          exp: this.header.exp,
        })
        if (!res.res) return;
        this.boxList = res.data;
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.body {
  padding: 20px 0;
  .header {
    margin-top: 20px;
    position: relative;
    .header_row {
      display: flex;
      //&.flex_between {
      //  display: flex;
      //  justify-content: space-between;
      //  margin-right: 50px;
      //}

      > div {
        flex-shrink: 0;
      }
      :deep(.produceDate) {
        .el-input {
          width: 100% !important;
        }
      }
    }
    .audit_icon {
      position: absolute;
      top: -10px;
      left: 60px;
      font-size: 48px;
      color: red;
    }
    .material {
      width: 100%;
    }
    .p3 {
      :deep(.el-form-item__content) {
        display: flex;
        .comment {
          margin-left: 10px;
          word-break: keep-all;
        }
      }
    }
  }
  .detail_header {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    .stat {
      display: flex;
      font-size: 15px;
      > div {
        display: flex;
        align-items: baseline;
        line-height: 32px;
        .label {
          text-align: right;
          margin-right: 5px;
          color: #aaa;
        }
        .value {
          min-width: 50px;
          margin-right: 10px;
          color: #666;
        }
      }
    }
  }
}
</style>
